<template>
  <div>
    <my-header> {{headerTitle}} </my-header>
    <search-input :placeholder='placeholder' :maxlength='maxlength' />
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <tab />
  </div>
</template>
<script>
import MyHeader from '@/components/header'
import SearchInput from '@/components/search/index.vue'
import Tab from '@/components/tab/index.vue'
import { computed, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  components: {
    MyHeader,
    Tab,
    SearchInput
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    router.push('/')
    store.commit('setPlaceholder', 'day')
    watch(
      () => {
        return router.currentRoute.value.name
      },
      value => {
        store.commit('setPlaceholder', value)
        store.commit('setHeaderTitle', value)
        store.commit('setMaxlength', value)
        store.commit('setType', value)
      }
    )
    return computed(() => store.state).value
  }
}
</script>
